<template>
	<view class="order_card" @click.stop="handleDetails">
		<view class="order_card_header">
			<text class="order_card_header_1">订单号：{{item?.orderNo}}</text>
			<text class="order_card_header_2">
				{{item?.orderStatus_dictText}}
				<!-- <template v-if="item?.orderStatus === '1'">待付款</template>
				<template v-else-if="item?.orderStatus === '2'">待发货</template>
				<template v-else-if="item?.orderStatus === '3'">待收货</template>
				<template v-else-if="item?.orderStatus === '4'">交易成功</template>
				<template v-else-if="item?.orderStatus === '5'">交易取消</template>
				<template v-else-if="item?.orderStatus === '6'">退款</template>
				<template v-else-if="item?.orderStatus === '7'">退款退货</template> -->
			</text>
		</view>
		<view class="order_card_goods">
			<image :src="item?.goodsImages" mode="aspectFill" class="order_card_goods_img"></image>
			<view class="order_card_goods_right">
				<view class="order_card_goods_right_1">{{item?.goodsName}}</view>
				<view class="order_card_goods_right_2">
					<text v-if="item?.specifications">{{item?.specifications}}</text><text>x{{item?.orderNum}}</text>
				</view>
			</view>
		</view>
		<view class="order_card_info">
			<view class="order_card_info_1">
				<view class="order_card_info_1_text1" v-if="item?.orderStatus === '1' && item?.countdown > 0">
					支付剩余<u-count-down :time="item?.countdown" format="HH:mm" autoStart @change="handleCountChange"
						ref="countDown" @finish="handleFinish">
						<view>
							<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
							<text class="time__item">{{ timeData.seconds  }}&nbsp;秒</text>
						</view>
					</u-count-down>
				</view>
				<text class="order_card_info_1_text2">共{{item?.orderNum}}件商品</text>
				<text class="order_card_info_1_text3">应付</text>
				<view class="goods_price18"><text>￥</text>{{item?.amountPayable}}</view>
			</view>
			<view class="order_card_info_1"></view>
		</view>
		<view class="order_card_btm_after_sale"
			v-if="(item?.orderStatus === '6' || item?.orderStatus === '7') && item?.scheduleExplain">
			<view>
				{{item?.scheduleName}}&nbsp;&nbsp;{{item?.scheduleExplain}}
			</view>
		</view>
		<view class="order_card_btm" v-else>
			<!-- 待付款 -->
			<button class="solid" @click.stop="handlePay" v-if="item?.orderStatus === '1'">去支付</button>
			<!-- 待收货 -->
			<template v-if="item?.orderStatus === '3'">
				<button @click.stop="handleLogisticsDetails">物流详情</button>
				<button class="solid" @click.stop="handleConfirmReceipt">确认收货 </button>
			</template>
			<!-- 待发货 -->
			<button class="solid" @click.stop="handleEditAddress" v-if="item?.orderStatus === '2'"
				:disabled="item?.izEditAddress === '1'">修改地址</button>
			<!-- 评价 / 交易成功-->
			<template v-if="item?.orderStatus === '4'">
				<button @click.stop="handleEvaluate" v-if="item?.izEvaluate === '0'">去评价 </button>
				<button @click.stop="handleEvaluateDetails" v-else>评价详情</button>
				<button class="solid" @click.stop="handlebuyAgain">再次购买 </button>
			</template>
			<button class="solid" @click.stop="handlebuyAgain"
				v-if="item?.orderStatus === '6' && !item?.scheduleExplain">再次购买 </button>
			<!-- 交易取消 -->
			<button class="solid" @click.stop="handlebuyDeleteOrder" v-if="item?.orderStatus === '5'">删除订单 </button>
			<!-- 退款售后 退款失败-->
			<!-- <button class="solid" @click.stop="handleReapply">再次申请 </button> -->
			<!-- 退款售后 审核中-->
			<!-- <button class="solid" @click.stop="handleCancellationApplication">撤销申请 </button> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { qxGoodsOrderDelete, requestPayment, confirmReceipt } from '@/config/goodStuff.api';
	import { onHide } from '@dcloudio/uni-app';

	const timeData = ref({ minutes: 0, seconds: 0, });
	const countDown = ref();

	const emit = defineEmits(['handleFinish']);
	const { item } = defineProps({
		item: {
			type: Object,
			default: () => ({}),
		},
	});

	onHide(() => {
		if (countDown.value) {//结束倒计时
			countDown.value.pause();
		}
	})

	/**
	 * 倒计时监听
	 */
	function handleCountChange(e) {
		timeData.value = e;
	}

	/**
	 * 倒计时完成
	 */
	function handleFinish() {
		emit('handleFinish');
	}

	/**
	 * 跳转详情
	 */
	function handleDetails() {
		let path = '';
		if (item?.orderMainStatus === '5') {
			path = 'refundSchedule';//退款进度
		} else {
			path = 'orderDetails';//订单详情
		}
		uni.$u.route('/pages/goodStuff/' + path, {
			id: item?.id,
			returnId: item?.returnId,
		});
	}

	/**
	 * 物流详情
	 */
	function handleLogisticsDetails() {
		uni.$u.route('/pages/goodStuff/logisticsDetails', {
			logisticCode: item?.logisticCode,
			shipperCode: item?.shipperCode,
			orderId: item?.id,
			address: `${item?.location ? item?.location?.replaceAll(',', '') : ''}${item?.address}`,
			orderNo: item?.orderNo,
		});
	}

	/**
	 * 去支付
	 */
	async function handlePay() {
		const res = await requestPayment({ id: item?.id });
		//#ifdef MP-WEIXIN
		uni.requestPayment({
			provider: 'wxpay',
			orderInfo: {},
			timeStamp: res?.timeStamp,
			nonceStr: res?.nonceStr,
			package: res?.packageVal,
			signType: res?.signType,
			paySign: res?.paySign,//后端生成  https://developers.weixin.qq.com/community/pay/doc/000cc80f23c3f0ec8aeaf53a651400
			success: function (res) {
				emit('handleFinish');
			},
			fail: function (err) {
				console.log('fail:' + JSON.stringify(err));
			}
		});
		//#endif
	}

	/**
	 * 修改地址
	 */
	function handleEditAddress() {
		// 待发货 只能修改一次 跳转修改收货地址  editReceivingAddress
		uni.$u.route('/pages/goodStuff/selectAddress', {
			orderStatus: item?.orderStatus,
			freightTemplateId: item?.freightTemplateId || item?.templateId,
			orderId: item?.id
		});
	}

	/**
	 * 确认收货
	 */
	function handleConfirmReceipt() {
		uni.showModal({
			content: '是否确认收货？',
			confirmColor: '#FF943C',
			success: async (res) => {
				if (res?.confirm) {
					uni.showLoading()
					const res = await confirmReceipt({ id: item?.id });
					uni.showToast({
						icon: 'success',
						title: res,
						success() {
							emit('handleFinish')
						}
					})
				} else { }
			},
			fail: (res) => {
			}
		})
	}

	/**
	 * 去评价
	 */
	function handleEvaluate() {
		uni.$u.route('/pages/goodStuff/evaluate', {
			orderId: item?.id,
			goodsId: item?.goodsId,
			goodsName: item?.goodsName,
		});
	}

	/**
	 * 评价详情
	 */
	function handleEvaluateDetails() {
		uni.$u.route('/pages/goodStuff/evaluateDetails', {
			id: item?.id,
		});
	}

	/**
	 * 再次购买
	 */
	function handlebuyAgain() {
		uni.$u.route('/pages/goodStuff/goodDetails', {
			id: item?.goodsId
		});
	}

	/**
	 * 删除订单
	 */
	function handlebuyDeleteOrder() {
		uni.showModal({
			content: '是否删除该订单？',
			confirmColor: '#FF943C',
			success: async (res) => {
				if (res?.confirm) {
					const res = await qxGoodsOrderDelete({ id: item?.id });
					uni.showToast({
						icon: 'success',
						title: res,
						success() {
							emit('handleFinish');
						}
					})
				} else { }
			},
			fail: (res) => {
			}
		})
	}
</script>

<style scoped lang="scss">
	.order_card {
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin: 20rpx 24rpx 0 24rpx;

		&:first-child {
			margin-top: 24rpx;
		}

		.order_card_header {
			border-bottom: 2rpx solid #F1F1F1;
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			.order_card_header_1 {
				color: #999999;
			}

			.order_card_header_2 {
				color: #FF0000;
				font-weight: 500;
			}
		}

		.order_card_goods {
			display: flex;
			align-items: center;
			margin: 20rpx;
			border-bottom: 2rpx solid #F1F1F1;

			.order_card_goods_img {
				width: 176rpx;
				height: 176rpx;
				margin-right: 24rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
			}

			.order_card_goods_right {
				flex: 1;
				margin-bottom: 20rpx;
				height: 176rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.order_card_goods_right_1 {
					font-size: 32rpx;
					font-weight: 500;
					padding-bottom: 18rpx;
				}

				.order_card_goods_right_2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 500;

					text {
						&:nth-child(1) {
							font-size: 24rpx;
							padding: 6rpx 14rpx;
							background-color: #EDEDED;
							margin-right: 20rpx;
							display: inline-block;
						}

						&:nth-child(2) {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.order_card_info {
			padding: 0 20rpx 20rpx 20rpx;

			.order_card_info_1 {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.order_card_info_1_text1 {
					display: flex;
					font-size: 26rpx;
					color: #333333;
				}

				.order_card_info_1_text2,
				.order_card_info_1_text3 {
					font-size: 28rpx;
					color: #999999;
					margin-left: 20rpx;
				}

				.order_card_info_1_text3 {
					margin: 0 4rpx 0 8rpx;
				}
			}
		}

		.order_card_btm {
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx 20rpx 0;

			button {
				margin: 0 20rpx 0 0;
				padding: 0 28rpx;
				height: 60rpx;
				line-height: 54rpx;
				font-size: 28rpx;
				border-radius: 776rpx;
				color: #7E7E7E;
				border: 1px solid #B8B8B8;
				background-color: #fff;

				&[disabled]:not([type]) {
					opacity: 0.5;
				}

				&.solid {
					color: #fff;
					background-color: #FF943C;
					border: 1px solid #FF943C;
				}

				&:last-child {
					margin-right: 0;
				}

				&::after {
					border: 0;
				}
			}
		}

		.order_card_btm_after_sale {
			background-color: #fff;
			padding: 0 20rpx 20rpx 20rpx;

			&>view {
				padding: 18rpx;
				background-color: #FFF0F0;
				color: #FF5858;
				font-size: 28rpx;
			}
		}
	}

	::v-deep .u-count-down {
		flex-direction: row !important;
	}
</style>